<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器注册页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">

    <script src="js/jquery.js"></script>
    <!-- 粒子样式 -->
    <script src="js/Particleground.js"></script>
    <script th:inline="javascript">

        $(document).ready(function () {
            //粒子背景特效
            $('body').particleground({
                dotColor:'#fff',
                lineColor: '#fff'
            });
        });
    </script>

    <script>
        $(function(){
            $("#register").click(function(){
                var username = $("#username").val();
                var password = $("#password").val();
                $.ajax({
                 url: "/user/register",
                 type: "POST",
                 data:{
                        "username":username,
                        "password":password
                    },
                dataType:"json",
                 success: function(data){
                     console.log(data);
                     if(data.status == 200) {
                        // alert("注册成功");
                        window.location.href="login.html";
                     }else{
                        alert("注册失败");
                        $("#username").val("");
                        $("#password").val("");
                        $("#repassword").val("");
                     }
                 }
             })
            })
        });
    </script>

</head>
<body>
    <div class="regis-container">
        <form action="regis" method="post">
            <div class="regis-dialog">
                <strong>在线音乐注册</strong>
                <em>XiaoXiangYeYu's music register</em>
                <div class="row">
                    <span>账号</span>
              
                    
                    <input type="text" id="username" name="username" placeholder="输入账号" class="regis_txtbx"/>
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" name="password" placeholder="输入密码" class="regis_txtbx"/>
                </div>
                <div class="row">
                    <span>确认密码</span>
                    <input type="password" id="repassword" name="password" placeholder="确认密码" class="regis_txtbx"/>
                </div>
                <div class="row">
                    <input type="button" id="register" value="立即注册" class="regis_btn"/>
                </div>
            </div>
        </form>
    </div>
    <script>
        let register = document.querySelector('#register');
        console.log(register);
         register.onclick = function() {
             let username = document.querySelector('#username');
             let password = document.querySelector('#password');
             let repassword = document.querySelector('#repassword');
             if(username.value.trim() == ""){
                 alert("请输入账号!");
                 username.focus();
                 return;
             }
             if(password.value.trim() == ""){
                 alert('请输入密码!');
                 password.focus();
                 return;
             }
             if(repassword.value.trim() == ""){
                 alert('请再次输入密码!');
                 repassword.focus();
                 return;
             }
             if(username.value.trim().length > 15) {
                 alert("账号长度不可超过15个字符，请重新输入");
                 username.value="";
                 username.focus();
                 return;
             }
             if(password.value.trim() != repassword.value.trim()) {
                 alert('两次输入的密码不同，请重试输入!');
                 passwrod.value="";
                 repassword.value="";
                 return;
             }
             if(password.value.trim().length > 255) {
                 alert("当前密码长度过长!");
                 password.value="";
                 repassword.value="";
                 password.focus();
                 return;
             }
            
         }
     </script>
</body>
</html>